<template>
	<div>
		<div class="dm-header">
			<HeaderTop>
				<img style="width: 32%; height: 5vw" :src="baseURL + '/static/home/font.png'" alt="" />
			</HeaderTop>
			<div class="search-header">
				<div style="color: #1c4fa1">
					{{ mapData.ad_info.city ? mapData.ad_info.city : city }}
				</div>
				<div class="search-header-right " @click="searchMethod">
					<!-- 	<input type="text" placeholder="搜索相关症状" placeholder-style=""
						readonly /> -->
					<div class="input-class">
						<div style="margin-right: 5px;">
							<u-icon name="search" color="#999" size="18"></u-icon>
						</div>
						<div>搜索相关症状</div>
					</div>
					<div class="btn">
						<u-icon color="#fff" name="search"></u-icon>
					</div>
				</div>
			</div>
			<view class="uni-margin-wrap">
				<swiper class="swiper" style="height: 41vw" circular :indicator-dots="false" :autoplay="true">
					<swiper-item v-for="url in swiperList" :key="url.imageUrl">
						<img style="width: 100%; height: 100%; border-radius: 16rpx" :src="url.imageUrl" alt=""
							srcset="" />
					</swiper-item>
				</swiper>
			</view>
			<view style="height: 30rpx"></view>

			<div class="min-Tools">
				<!-- <div class="min-Tools-item">
					<img @click='internetHospitalClick' :src="baseURL + '/static/home/icon-kswz.png'" alt="">
				</div>
				<div class="min-Tools-item" style="position: relative;">
					<img :src="baseURL + '/static/home/icon-zxzx.png'" alt="">
					<button style="width: 100%;height: 100%;opacity: 0;position: absolute;top: 0;left:0"
						open-type="contact"></button>
				</div>
				<div class="min-Tools-item">
					<img @click="MakeAnAppointmentClick" :src="baseURL + '/static/home/icon-yygh.png'" alt="">
				</div>
				<div class="min-Tools-item two">
					<img @click='reservationRecordClick' :src="baseURL + '/static/home/icon-yyjl.png'" alt="">
					<img @click='recordsOfConsumptionClick' :src="baseURL + '/static/home/icon-zljl.png'" alt="">
				</div> -->
				<div class="min-Tools-item left-box">
					<div @click="healthRecordsMethod" style="
					  height: 18.5vw;
					  display: flex;
					  justify-content: center;
					  flex-direction: column;
					  padding-left: 20rpx;
					">
						<img style="width: 50%" mode="widthFix" :src="baseURL + '/static/new-home/icon-jkda.png'"
							alt="" />
						<div style="color: #fff;font-size: 12px;margin-top: 10rpx;">实时查看毛发情况</div>
					</div>
					<div @click="personalInformationMehtod" style="
              background-color: #5a90ee;
              height: 18.5vw;
              display: flex;
			  align-items: center;
              padding-left: 20rpx;
			  border-radius: 20rpx  20rpx 0 0;
            ">
						<div style="width: 12vw; height: 12vw; margin-right: 5px">
							<img style="border-radius: 50%" :src="
                  info.avatarUrl
                    ? info.avatarUrl
                    : baseURL + '/static/new-home/icon-tx.png'
                " alt="" />
						</div>
						<div>
							<div style="color: #fff; font-size: 16px">
								{{ info.nickName ? info.nickName : "用户名称" }}
							</div>
							<div style="color: #fff; font-size: 12px;margin-top: 6rpx;">暂无就诊记录</div>
						</div>
					</div>
				</div>
				<div style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
					<div class="min-Tools-item h17vw">
						<img @click="bookingRegistrationMehtod" :src="baseURL + '/static/new-home/icon-yygh.png'"
							alt="" />
					</div>
					<div class="min-Tools-item h17vw two">
						<!-- <img @click="internetHospitalMehtod" :src="baseURL + '/static/new-home/icon-zx.png'" alt="" /> -->
						<div style="position: relative">
							<img :src="baseURL + '/static/new-home/icon-kf.png'" alt="" />
							<button style="
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  position: absolute;
                  top: 0;
                  left: 0;
                " open-type="contact"></button>
						</div>
					</div>
				</div>
			</div>

			<div style="padding: 0rpx 20rpx; margin-bottom: 20rpx">
				<!-- 		<div style="
            text-align: center;
            display: flex;
            align-items: center;
            background-color: rgba(32, 57, 198, 0.15);
            padding: 10rpx 20rpx;
            border-radius: 20px;
          ">
					<div style="margin-right: 5px">
						<u-icon :name="baseURL + '/static/new-home/icon-hd.png'" color="#98b7ed" size="12"></u-icon>
					</div>
					<text style="color: #fff; font-size: 12px">邀请有礼活动上线啦，赶快去邀请好友拿奖励</text>
				</div> -->
			</div>
			<div class="min-Tools">
				<div @click="bonusMallMehtod" class="min-Tools-item h20vw">
					<img :src="baseURL + '/static/new-home/icon-jfsc.png'" alt="" />
				</div>
				<div @click="inviteFriendsMehtod" class="min-Tools-item h20vw" style="position: relative">
					<img :src="baseURL + '/static/new-home/icon-yqhl.png'" alt="" />
				</div>
			</div>
			<div class="tool-foots">
				<div class="tool-foot" @click="informationRegistrationClick">
					<div>
						<img :src="baseURL + '/static/new-home/icon-xxdj.png'" alt="" />
					</div>
					<div>信息登记</div>
				</div>
				<div class="tool-foot" @click="diagnosisRecordClick">
					<div>
						<img :src="baseURL + '/static/new-home/icon-zljl.png'" alt="" />
					</div>
					<div>诊疗记录</div>
				</div>
				<div class="tool-foot" @click="commentOnick">
					<div>
						<img :src="baseURL + '/static/new-home/icon-fydp.png'" alt="" />
					</div>
					<div>发友点评</div>
				</div>
				<!-- 	<div class="tool-foot" style="position: relative;">
					<div @click="spaceClick"><img :src="baseURL + '/static/home/icon-wdkj.png'" alt=""></div>
					<div>邀请好友 </div>
					<button :hairline="false" :style="{
							  border: 'none',
							  padding: '0 !important',
							  width: '100%',
							  height: '100%',
							  opacity: '0',
							  position: 'absolute',
							}" open-type="share" text=""></button>
				</div> -->
				<div class="tool-foot" @click="hairSelfTestClick">
					<div>
						<img :src="baseURL + '/static/new-home/icon-mfzc.png'" alt="" />
					</div>
					<div>毛发自测</div>
				</div>
				<div class="tool-foot" @click="aboutClick">
					<div>
						<img :src="baseURL + '/static/new-home/icon-hlwyy.png'" alt="" />
					</div>
					<div>关于大麦</div>
				</div>
			</div>
		</div>
		<!-- <div style="height: 30rpx;background-color: #e8eef8;"></div> -->
		<!-- 	<div class="branch-doctor">
			<div class="branch-doctor-left" @click="PhysicianManagementClick">
				<img :src="baseURL + '/static/home/icon-dmys.png'" alt="">
				<div style="position: absolute;left: 0;bottom: 0rpx;width: 100%;">
					<xzw-notice theme='tm' :showIcon="false" :showMore="false" speed="fast" :list="doctorArr" />
				</div>
			</div>
			<div class="branch-doctor-right" @click="MakeAnAppointmentClick">
				<div style="display: flex;justify-content: space-between;align-items: flex-end;margin-bottom: 10rpx;">
					<div style="font-size: 32rpx;font-weight: 600;">附近分院</div>
					<div style="font-size: 24rpx;">22 KM</div>
				</div>
				<div style="width: 100%;height: 40vw;border-radius: 30rpx;overflow: hidden;position: relative;">
					<img style="width: 100%;height: 100%;" :src="baseURL + '/static/home/icon-dmfy.png'" alt="">
					<div class="zzc-box">
						<div>北京分院</div>
						<div>9:00 - 22:00</div>
					</div>
				</div>
				<div style="display: flex;margin-top: 20rpx;justify-content: center;font-size: 12px;">
					<div
						style="padding: 10rpx 20rpx;border-radius: 20rpx 0 0 20rpx;background-color: #226ae3;color: #fff;margin-right: 6rpx;">
						预约到院
					</div>
					<div
						style="padding: 10rpx 20rpx;border-radius:0 20rpx  20rpx 0;background-color: #efab63;color: #fff;">
						查看更多</div>
				</div>
			</div>
		</div> -->
		<div class="branch-doctor">
			<div class="branch-doctor-left" @click="PhysicianManagementClick">
				<div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
					<div>
						<div style="font-size: 14px; font-weight: 600">北京分院</div>
						<div style="font-size: 12px">专业权威</div>
					</div>
					<div>
						<img style="width: 20vw" mode="widthFix" :src="baseURL + '/static/new-home/left-icon.png'"
							alt="" />
					</div>
				</div>
				<div>
					<img style="width: 100%" mode="widthFix" :src="baseURL + '/static/new-home/left-img-icon.png'"
						alt="" />
				</div>
			</div>
			<div class="branch-doctor-right" @click="MakeAnAppointmentClick">
				<div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
					<div>
						<div style="font-size: 14px; font-weight: 600">诊疗路径</div>
						<div style="font-size: 12px">贴心定制</div>
					</div>
					<div>
						<img style="width: 20vw" mode="widthFix" :src="baseURL + '/static/new-home/right-icon.png'"
							alt="" />
					</div>
				</div>
				<div v-if='appointObj.appointStoreName'>
					<div style="
							background-color: #fff;
							border-radius: 10px;
							width: 100%;
							padding: 10px;
							box-sizing: border-box;
							font-size: 12px;
					">
						<div class="box-line">
							<div>
								<img :src="baseURL + '/static/new-home/icon-m-01.png'" alt="" />
							</div>
							<div style="
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                ">
								{{ appointObj.appointStoreName }}
							</div>
						</div>
						<div class="box-line">
							<div>
								<img :src="baseURL + '/static/new-home/icon-m-02.png'" alt="" />
							</div>
							<div>{{ appointObj.appointDate }}</div>
						</div>
						<div class="box-line">
							<div>
								<img :src="baseURL + '/static/new-home/icon-m-03.png'" alt="" />
							</div>
							<div>{{ appointObj.appointTime }}</div>
						</div>
						<div class="box-line" style="margin-bottom: 0">
							<div>
								<img :src="baseURL + '/static/new-home/icon-m-04.png'" alt="" />
							</div>
							<div>{{ appointObj.doctorName }}</div>
						</div>
					</div>
				</div>
				<div v-else>
					<div style="display: flex;justify-content:center;margin-top: 20px;">
						<img style="width: 60%;" mode='widthFix' :src="baseURL + '/static/new-home/icon-zdlj.png'"
							alt="" />
					</div>
					<div style="margin-top: 10px;color: #666666;text-align: center;font-size: 12px;">您当前没有预约消息</div>
				</div>
			</div>
		</div>
		<view class="hair-community">
			<view class="header-title">
				<view class="left-box"><img :src="baseURL + '/static/home/mfsq.png'" alt="" /></view>
				<view class="right-box" @click="hairCommunityClick">
					<div>更多</div>
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
			<HairCommunity />
		</view>
		<u-popup :show="show" @close="closeMList" @open="openMList" mode="bottom" :round="20">
			<view>
				<MList @MListShow="MListShow"></MList>
			</view>
		</u-popup>
	</div>
</template>


<script>
	import {
		list,
		jsonToRSA,
		jscode2session
	} from "@/api/axios/Home.js";
	import HairCommunity from "./components/HairCommunity/index.vue";
	import MList from "./MList/index.vue";
	import HeaderTop from "@/components/header-top/index.vue";
	import {
		recordList
	} from "@/api/axios/MakeAnAppointmentCenter.js";
	export default {
		props: {
			mapData: {
				type: Object,
				require: true,
			},
			height: {
				type: Number,
				require: true,
			},
			menuHeight: {
				type: Number,
			},
		},
		components: {
			HairCommunity,
			HeaderTop,
			MList,
		},
		data() {
			return {
				value: "",
				show: false,
				baseURL: this.staticURL,
				swiperList: [],
				city: "定位中...",
				doctorArr: [{
						id: 1,
						title: "白日依山尽，黄河入海流",
					},
					{
						id: 2,
						title: "欲穷千里目，更上一层楼",
					},
					{
						id: 3,
						title: "床前明月光，疑是地上霜",
					},
					{
						id: 4,
						title: "举头望明月，低头思故乡",
					},
				],
				info: {},
				appointObj: {},
			};
		},
		methods: {
			searchMethod() {
				this.show = true;
			},
			aboutClick() {
				uni.navigateTo({
					url: "/pages/About/index",
				});
			},
			showToastMethod() {
				uni.showToast({
					icon: "none",
					title: "正在开发中，尽情期待",
					duration: 2000,
				});
			},
			healthRecordsMethod() {
				uni.navigateTo({
					url: "/pages-center/HealthRecords/index",
				});
				// this.showToastMethod();
			},
			personalInformationMehtod() {
				uni.navigateTo({
					url: "/pages-center/WXinfo/index",
				});
			},
			bookingRegistrationMehtod() {
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/MList/index",
				});
			},
			internetHospitalMehtod() {
				let openId = uni.getStorageSync("openId");
				if (openId) {
					uni.navigateTo({
						url: "/pages/InternetHospital/index",
					});
				} else {
					uni.showModal({
						title: '',
						content: '请登录后查看',
						success: function(res) {
							if (res.confirm) {

							} else if (res.cancel) {

							}
						}
					});
				}

			},
			bonusMallMehtod() {
				// uni.navigateTo({
				// 	url: "/pages-shop/home/index",
				// });
				this.showToastMethod();
			},
			inviteFriendsMehtod() {
				this.showToastMethod();
			},
			diagnosisRecordClick() {
				uni.navigateTo({
					url: "/pages-center/ConsumptionRecord/index",
				});
			},
			commentOnick() {
				uni.navigateTo({
					url: "/pages/CommentOn/index",
				});
			},
			hairSelfTestClick() {
				uni.navigateTo({
					url: "/pages-center/HairTest/index",
				});
				// this.showToastMethod();
			},
			hairCommunityClick() {
				// uni.navigateTo({
				// 	url: "/pages/HairCommunity/index",
				// });
				console.log((this.$parent.active = 3));
			},

			MListShow(show) {
				this.show = show;
			},
			closeMList() {
				this.show = false;
			},
			openMList() {
				this.show = true;
			},

			informationRegistrationClick() {
				uni.navigateTo({
					url: "/pages-center/InformationRegistration/index",
				});
			},
			MakeAnAppointmentClick() {
				uni.navigateTo({
					url: "/pages-center/AppointmentRecord/index",
				});
			},
			PhysicianManagementClick() {
				uni.navigateTo({
					url: "/pages/PhysicianManagement/index",
				});
			},
		},
		created() {
			let code = uni.getStorageSync("code");
			let openId = uni.getStorageSync("openId");
			let avatarUrl = uni.getStorageSync("avatarUrl");
			let wePhone = uni.getStorageSync("wePhone");
			let nickName = uni.getStorageSync("nickName");

			this.info.avatarUrl = avatarUrl;
			this.info.nickName = nickName;
			jsonToRSA({
				params: {
					json: {
						appId: "wx363402ec173d7c4f",
						openId: openId,
						unionId: "",
						phone: wePhone,
						nickName: nickName,
						avatarUrl: avatarUrl,
					},
				},
			}).then((res) => {
				uni.setStorageSync("privateJson", res.privateJson);
				uni.setStorageSync("publicKey", res.publicKey);
			});
			let customerId = uni.getStorageSync("customerId");
			recordList({
				params: {
					customerId: customerId,
				},
			}).then((res) => {
				res.forEach((item) => {
					if (item.appointStatus === 1) {
						this.appointObj = item;
						return;
					}
				});
			});
		},
		mounted() {
			let _this = this;

			list({
				params: {
					status: 0,
				},
			}).then((res) => {
				if (res.length > 0) {
					_this.swiperList = res;
				} else {
					_this.swiperList = [{
						imageUrl: this.baseURL + "/static/home-banner.png",
					}, ];
				}
			});
		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>